<template>
    <div class="tree">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :indent="0" lazy :load="loadNode"></el-tree>
    </div>
</template>

<script>
import {getTeacherDepart} from "@/api/student";
export default {
  name: "ChoseStudent",
  data(){
    return {
      defaultProps: {
        children: 'children',
        label: 'deptName',
        value:'id',
        isLeaf:'leaf'
      },
       data: [],
    }
  },
  methods:{
    loadNode(node, resolve) {
        if (node.level === 0) {
            this.initClass(resolve,-1)
        }
        if (node.level >= 1) {
            this.initClass(resolve,node.data.id);
            return resolve([])
        }
    },
    handleNodeClick(data){
      this.$emit('getNode',data)
      if(data.leaf == true){
      }
    },
    //获取下级部门
    async initClass(resolve,id){
      let res = await getTeacherDepart({id:id});
      if(res.code == 200){
        resolve(res.data)
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../styles/commonCss.less";
.el-tree{
    margin-top: 20px;
    color: #004CA7;
    /deep/.el-tree-node__label{
        font-size: 16px;
    }
    /deep/.treeitem:first-child{
        font-weight: bold
    } 
    /deep/.el-tree-node__expand-icon{
                color: #004CA7;
            }
    // /deep/.el-tree-node.is-current>.el-tree-node__content{
    //     color: #004CA7;
    //     background-color:#fff ;
    // }
    /deep/.el-tree-node__content{
        height: 36px;
    }
    // /deep/.el-tree-node__content:hover {
    //     background-color: #fff;
    // }
    /deep/.el-tree-node{
        position: relative;
        padding-left: 16px;
    }
    /deep/.el-tree-node__children{
        padding-left: 16px;
    }
    
    //竖线
    /deep/.el-tree-node::before{
        content:'';
        height:100%;
        width:1px;
        position: absolute;
        left: 27px;
        top: 17px;
        // border-width: 1px;
        // border-left:1px dashed rgba(0,76,167,0.39) ;

    }
    //当前最后一个节点的竖线高度固定
    /deep/.el-tree-node+:last-child::before{
        height: 36px;
        border: none;
    }
    //横线
    /deep/.el-tree-node::after{
        content:'';
        height:20px;
        width:24px;
        position: absolute;
        left: -3px;
        top: 17px;
        // border-width: 1px;
        // border-top:1px dashed rgba(0,76,167,0.39) ;
    }
    /deep/[role=treeitem]{
        padding-bottom: 26px;
    }
}
</style>

